feat(mobile): update background images for wallet 4.0#14943
Merged
LucasWerey merged 2 commits intodevelopfrom Mar 3, 2026
Merged
feat(mobile): update background images for wallet 4.0#14943LucasWerey merged 2 commits intodevelopfrom
LucasWerey merged 2 commits intodevelopfrom
Conversation
LucasWerey
force-pushed
the
feat/LIVE-27112
branch
2 times, most recently
from
9e54b3f to
5c5c0ec
Compare
…modes - Add v4-light.webp portfolio background for wallet 4.0 light mode - Replace card-landing-bg.webp with card-bg.webp - Update WalletTabBackgroundGradient to use v4-light image instead of solid color - Simplify CardLandingScreenView with dynamic background image source - Update EarnBackground to support both light and dark theme backgrounds
LucasWerey
force-pushed
the
feat/LIVE-27112
branch
from
5c5c0ec to
0062cfc
Compare
- Show Earn background image in both light and dark modes instead of dark-only. - Use theme-appropriate asset via colorScheme and align image container sizing with wallet background pattern.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements the Wallet 4.0 background image updates for the mobile app. It adds a new v4-light.webp image for light mode, replaces card-landing-bg.webp with card-bg.webp for the card landing screen, and updates multiple screens to use theme-aware background images consistently in both light and dark modes.
Changes:
- New
v4-light.webpand updatedv4-dark.webpassets added;card-bg.webpreplaces the oldcard-landing-bg.webp. WalletTabBackgroundGradient: Now uses theme-aware image for Wallet 4.0 (both light and dark), removing the dark-mode-only gradient overlay.CardLandingScreenView+useCardLandingScreenViewModel: Background image is now always rendered (not gated by dark mode), withbackgroundImageSourceselected by the ViewModel based on theme.EarnBackground: Always renders a background image in both themes instead of only dark mode.
Reviewed changes
Copilot reviewed 5 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
WalletTabBackgroundGradient.tsx |
Adds v4-light.webp for Wallet 4.0 light mode; removes dark-mode-only gradient overlay |
useCardLandingScreenViewModel.ts |
Adds backgroundImageSource prop, computes image based on isWallet40DarkMode |
CardLandingScreenView.tsx |
Unconditionally renders background image using the new backgroundImageSource prop |
EarnBackground.tsx |
Always renders a background image (previously only for dark mode); uses v4-light.webp for light mode |
v4-light.webp |
New asset for Wallet 4.0 light mode |
v4-dark.webp |
Updated dark mode asset |
.changeset/afraid-lemons-train.md |
Changeset for minor version bump |
...ive-mobile/src/mvvm/features/Card/screens/CardLandingScreen/useCardLandingScreenViewModel.ts
Show resolved
Hide resolved
mcayuelas-ledger
approved these changes
Mar 3, 2026
Valentin-Ledger
approved these changes
Mar 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ Checklist
npx changesetwas attached.- Wallet tab background rendering in both light and dark themes
- Card landing screen background image display
- Verify v4-light.webp and card-bg.webp render correctly across devices
📝 Description
Wallet 4.0 light mode was previously using a solid gradient background while dark mode had a dedicated image. This PR adds a
v4-light.webpbackground image for wallet 4.0 light mode and updates all screens to use theme-aware image backgrounds consistently.Changes:
v4-light.webpfor wallet 4.0 light mode instead of falling back to a solid color gradient. Removed the gradient overlay logic (previously only for dark mode) in favor of letting the images handle the visual treatment directly.backgroundImageSourceas a prop, removing the hardcoded dark-only image. Now displays a background image in both light and dark modes.card-bg.webp(dark) andv4-light.webp(light) based on the current theme.v4-light.webp, replacedcard-landing-bg.webpwithcard-bg.webp, updatedv4-dark.webp.Full demo (ff ON/OFF):
Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2026-03-02.at.18.46.21.mov
❓ Context
🧐 Checklist for the PR Reviewers